HelloWorl
<template>
  <div>
    <a href="https://vite.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <HelloWorld msg="Vite + Vue" />

  <WanAdnroid />

  <p :hidden="false"><a @click="save">获取鸿蒙list</a></p>

  <p :hidden="false"><a href="https://www.baidu.com/">baidu</a></p>

  <RouterLink to="/news?mykey=luckey" active-class="select">新闻</RouterLink>

  <button @click="goNews">跳转新闻</button>

  <h2>Vue路由测试</h2>
  <!-- 导航区 -->
  <div class="navigate">
    <RouterLink to="/home" active-class="select">首页</RouterLink>
    <RouterLink to="/news" active-class="select">新闻</RouterLink>
    <RouterLink to="/about" active-class="select">关于</RouterLink>
  </div>
  <!-- 展示区 -->
  <div class="main-content">
    <RouterView></RouterView>
  </div>
</template>

<script setup lang="ts">
import HelloWorld from "./components/HelloWorld.vue";
import WanAdnroid from "./components/WanAdnroid.vue";

import { getHarmonyContent } from "./ts/http.ts";
import Vconsole from "vconsole";
import { saveAbule, getJ } from "./ts/JsBridge.ts";
import { useRouter } from "vue-router";
import { onMounted, reactive, ref } from "@vue/runtime-core"; // 修改这里

const router = useRouter();
new Vconsole();

// const getList = () => {
//   get("/list", {
//     page: 1,
//     size: 10,
//   }).then((res) => {
//     console.log(res);
//   });
// };
const save = () => {
  saveAbule();
};
const goNews = () => {
  router.push("/news?mykey=luckey");
};
const getHarmonyList = () => {
  getHarmonyContent()
    .then((res) => {
      console.log("成功", res);
    })
    .catch((err) => {
      console.log("失败 ", err);
    });
};

onMounted(() => {
  getHarmonyList();
  getJ();
});

const count = ref(0);
const state = reactive({
  count,
});

console.log(state.count); // 0

state.count = 1;
console.log(count.value); // 1

const otherCount = ref(2);

state.count = otherCount.value;
console.log(state.count); // 2
// 原始 ref 现在已经和 state.count 失去联系
console.log(count.value); // 1
</script>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
